<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>Document</title>
		<!-- 引入样式 -->
		<link rel="stylesheet" href="../../plugins/element-ui/index.css" />
		<link rel="stylesheet" href="../../styles/common.css" />
		<link rel="stylesheet" href="../../styles/page.css" />
		<style>
			body {
				margin: 0;
				padding: 20px;
				font-family: Arial, sans-serif;
			}

			.card-detail {
				padding: 20px;
			}

			.detail-item {
				margin-bottom: 20px;
			}

			.detail-item label {
				font-weight: bold;
			}

			.card-image {
				max-width: 100%;
				height: auto;
				border-radius: 4px;
			}

			.el-button--text {
				/* color: red; */
				color: lightblue;
				margin-top: 15px;
				margin-left: 30px;
			}

			.el-button--text :hover {
				color: aqua;
			}

			.dashboard {
				max-width: 1200px;
				margin: 0 auto;
			}

			.chart-container {
				width: 100%;
				height: 400px;
				margin-bottom: 20px;
			}

			.stats-container {
				display: grid;
				grid-template-columns: repeat(4, 1fr);
				gap: 20px;
			}

			.stat-card {
				padding: 20px;
				border-radius: 4px;
				background-color: #f5f7fa;
				box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
			}

			.stat-card h3 {
				margin-top: 0;
				color: #666;
				font-size: 16px;
			}

			.stat-card .value {
				font-size: 24px;
				font-weight: bold;
				margin: 10px 0;
			}

			.stat-card .compare {
				font-size: 14px;
				color: #999;
			}

			.compare.positive {
				color: #67c23a;
			}

			.compare.negative {
				color: #f56c6c;
			}

			.container {
				max-width: 1200px;
				margin: 0 auto;
				padding: 20px;
				font-family: "PingFang SC", "Microsoft YaHei", sans-serif;
				background-color: #f5f7fa;
			}

			.header {
				margin-bottom: 20px;
			}

			.total-card {
				background-color: #fff;
				padding: 20px;
				border-radius: 4px;
				box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
				margin-bottom: 20px;
			}

			.total-title {
				text-align: center;
				font-size: 16px;
				color: #666;
				margin-bottom: 10px;
			}

			.total-value {
				text-align: center;
				font-size: 28px;
				font-weight: bold;
				color: #333;
			}

			.card-stats {
				display: grid;
				grid-template-columns: repeat(3, 1fr);
				gap: 20px;
				margin-bottom: 30px;
			}

			.stat-item {
				background-color: #fff;
				padding: 20px;
				border-radius: 4px;
				box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
				text-align: center;
			}

			.stat-type {
				font-size: 18px;
				font-weight: bold;
				margin-bottom: 15px;
				color: #333;
			}

			.stat-value {
				font-size: 24px;
				color: #409EFF;
			}

			.card-list {
				display: grid;
				grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
				gap: 20px;
			}

			.card-item {
				background-color: #fff;
				border-radius: 8px;
				overflow: hidden;
				box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
				transition: transform 0.3s;
				cursor: pointer;
			}

			.card-item:hover {
				transform: translateY(-5px);
			}

			.cards-image {
				width: 100%;
				height: 160px;
				object-fit: cover;
			}

			.card-info {
				padding: 15px;
			}

			.card-name {
				font-size: 16px;
				font-weight: bold;
				margin-bottom: 10px;
				color: #333;
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;
			}

			.cards-stats {
				font-size: 14px;
				color: #666;
			}
		</style>
	</head>
	<body>
		<div id="app">
			<el-button type="text" @click="goBack()"> 返回 </el-button>

			<!-- 店铺信息模块 -->
			<h1>店铺信息</h1>
			<el-card class="card-detail">
				<div class="detail-content">
					<el-row :gutter="20">
						<el-col :span="24">
							<div class="detail-item">
								<label>店主名称：</label>
								<span>{{ shopDetail.username }}</span>
							</div>
						</el-col>
						<el-col :span="24">
							<div class="detail-item">
								<label>店铺名称：</label>
								<span>{{ shopDetail.name }}</span>
							</div>
						</el-col>

						<el-col :span="24">
							<div class="detail-item">
								<label>店铺等级：</label>
								<span>{{ shopDetail.levels }} </span>
							</div>
						</el-col>
						<el-col :span="24">
							<div class="detail-item">
								<label>店主电话：</label>
								<span>{{ shopDetail.phone }}</span>
							</div>
						</el-col>
						<el-col :span="24">
							<div class="detail-item">
								<label>店主邮箱：</label>
								<span>{{ shopDetail.email }}</span>
							</div>
						</el-col>
						<el-col :span="24">
							<div class="detail-item">
								<label>更新时间：</label>
								<span>{{ shopDetail.updateTime }}</span>
							</div>
						</el-col>
					</el-row>
					<el-row :gutter="20">
						<el-col :span="24">
							<div class="detail-item">
								<label>店铺签名：</label>
								<p>{{ shopDetail.remark }}</p>
							</div>
						</el-col>
					</el-row>
				</div>
			</el-card>

			<!-- 财务报表模块 -->
			<h1>{{ shopName }} - 经营报表</h1>
			<div class="dashboard">


				<!-- 月份选择器 -->
				<el-select v-model="selectedYear" placeholder="选择年份" @change="fetchData">
					<el-option v-for="year in [2023, 2024, 2025]" :key="year" :label="year + '年'" :value="year">
					</el-option>
				</el-select>

				<!-- 柱状图 -->
				<div class="chart-container" ref="chart"></div>

				<!-- 统计卡片 -->
				<div class="stats-container">
					<div class="stat-card" @click="viewAnnualReport(shopkeeperId)" style="cursor: pointer;">
						<h3>本月收入</h3>
						<div class="value">¥{{ formatNumber(stats.currentMonthIncome) }}</div>
						<div class="compare" :class="stats.incomeChange >= 0 ? 'positive' : 'negative'">
							<i :class="stats.incomeChange >= 0 ? 'el-icon-top' : 'el-icon-bottom'"></i>
							{{ Math.abs(stats.incomeChange) }}% 同比{{ stats.incomeChange >= 0 ? '增长' : '减少' }}
						</div>
					</div>

					<div class="stat-card">
						<h3>续费收入</h3>
						<div class="value">¥{{ formatNumber(stats.renewIncome) }}</div>
						<div class="compare" :class="stats.renewChange >= 0 ? 'positive' : 'negative'">
							<i :class="stats.renewChange >= 0 ? 'el-icon-top' : 'el-icon-bottom'"></i>
							{{ Math.abs(stats.renewChange) }}% 同比{{ stats.renewChange >= 0 ? '增长' : '减少' }}
						</div>
					</div>

					<div class="stat-card">
						<h3>新购卡收入</h3>
						<div class="value">¥{{ formatNumber(stats.newCardIncome) }}</div>
						<div class="compare" :class="stats.newCardChange >= 0 ? 'positive' : 'negative'">
							<i :class="stats.newCardChange >= 0 ? 'el-icon-top' : 'el-icon-bottom'"></i>
							{{ Math.abs(stats.newCardChange) }}% 同比{{ stats.newCardChange >= 0 ? '增长' : '减少' }}
						</div>
					</div>

					<div class="stat-card">
						<h3>新增会员数</h3>
						<div class="value">{{ formatNumber(stats.newMembers) }}</div>
						<div class="compare" :class="stats.memberChange >= 0 ? 'positive' : 'negative'">
							<i :class="stats.memberChange >= 0 ? 'el-icon-top' : 'el-icon-bottom'"></i>
							{{ Math.abs(stats.memberChange) }}% 同比{{ stats.memberChange >= 0 ? '增长' : '减少' }}
						</div>
					</div>
				</div>
			</div>
			<div class="container">
				<!-- 头部总统计 -->
				<div class="header">
					<h1>{{ shopName }} - 会员卡数据报表</h1>
				</div>

				<!-- 总会员卡统计 -->
				<div class="total-card">
					<div class="total-title">会员共持有会员卡</div>
					<div class="total-value">{{ formatNumber(totalCards) }}张</div>
				</div>

				<!-- 三种会员卡类型统计 -->
				<div class="cards-stats">
					<div class="stat-item">
						<div class="stat-type">期限卡</div>
						<div class="stat-value">{{ timeCardStats.validWithBalance }}/{{ timeCardStats.memberCount }}
						</div>
					</div>
					<div class="stat-item">
						<div class="stat-type">计次卡</div>
						<div class="stat-value">{{ countCardStats.validWithBalance }}/{{ countCardStats.memberCount }}
						</div>
					</div>
					<div class="stat-item">
						<div class="stat-type">储蓄卡</div>
						<div class="stat-value">
							{{ depositCardStats.validWithBalance }}/{{ depositCardStats.memberCount }}
						</div>
					</div>
				</div>

				<!-- 会员卡列表 -->
				<h2 style="margin-bottom: 20px;">会员卡列表</h2>
				<div class="card-list">
					<div class="card-item" v-for="card in cardList" :key="card.id" @click="toCardDetail(shopkeeperId)">
						<img :src="card.image" :alt="card.name" class="cards-image">
						<div class="card-info">
							<div class="card-name">{{ card.name }}</div>
							<div class="cards-stats">{{ card.validWithBalance }}张/{{ card.memberCount }}名</div>
						</div>
					</div>
				</div>
			</div>
			<div>
				<!-- 教师信息模块 -->
				<h1>教师信息</h1>
				<div>
					<el-button type="primary" @click="selectStadium">查询教师</el-button>
					<el-button type="primary" @click="selectTdetail(teacherId)">教师详情</el-button>
				</div>
				<el-table :data="tableData" stripe class="tableBox">
					<el-table-column type="selection" width="25"></el-table-column>
					<el-table-column prop="stadium.name" label="教师名称"></el-table-column>
					<el-table-column prop="stadium.phone" label="教师等级"></el-table-column>
					<el-table-column prop="stadium.num" label="本月课程数"></el-table-column>
					<el-table-column label="教师图片">
						<template #default="{ row }">
							<el-image style="width: 100px; height: 100px" :src="row.stadium.head" fit="cover"
								:preview-src-list="[row.stadium.head]"></el-image>
						</template>
					</el-table-column>
					</el-table-column>
				</el-table>
				<!--课程模块-->
				<h1 style="margin-top: 30px;">课程信息</h1>
				<el-table :data="courseData" stripe style="width: 100%">
					<el-table-column type="index" label="序号" width="60"></el-table-column>
					<el-table-column prop="name" label="课程名称" width="180"></el-table-column>
					<el-table-column label="课程标签">
						<template #default="{ row }">
							<el-tag v-for="(tag, index) in row.tags" :key="index" style="margin-right: 5px;"
								:type="index % 3 === 0 ? 'success' : index % 3 === 1 ? 'warning' : 'info'">
								{{ tag }}
							</el-tag>
						</template>
					</el-table-column>
					<el-table-column prop="teacher" label="授课教师"></el-table-column>
					<el-table-column prop="sections" label="课程节数"></el-table-column>
					<el-table-column label="操作" width="120">
						<template #default="{ row }">
							<el-button type="primary" size="mini" @click="viewCourseDetail(row)">详情</el-button>
						</template>
					</el-table-column>
				</el-table>

				<!-- 添加底部空白区域 -->
				<div style="height: 60px;"></div>

			</div> <!-- 这是原来的#app闭合标签 -->
		</div>


		<!-- 开发环境版本，包含了有帮助的命令行警告 -->
		<script src="../../plugins/vue/vue.js"></script>
		<!-- 引入组件库 -->
		<script src="../../plugins/element-ui/index.js"></script>
		<!-- 引入axios -->
		<script src="../../plugins/axios/axios.min.js"></script>
		<script src="../../plugins/echarts/echarts.min.js"></script>
		<script src="../../js/request.js"></script>
		<script src="../../js/validate.js"></script>
		<script src="../../js/index.js"></script>
		<script src="../../api/stadium.js"></script>
		<script src="../../api/card.js"></script>
		<script>
			let tagsOptions = [];
			new Vue({
				el: '#app',
				data() {
					return {
						shopName: 'Jiayun健身中心',
						shopkeeperId: '',
						tableData: [{
								stadium: {
									name: 'jitaimei',
									phone: '123456789',
									buyTime: '114.5.14',
									num: 10,
									head: '',
								},
							},
							{
								stadium: {
									name: '美至极',
									phone: '987654321',
									buyTime: '2005.5.4',
									num: 5,
									head: '',
								},
							},
						],
						shopDetail: {
							name: '黄金会员卡',
							day: 365,
							num: 100,
							background: 'https://via.placeholder.com/300',
							content: '这是一张黄金会员卡，享受店内所有服务。'
						},
						selectedYear: new Date().getFullYear(),
						chart: null,
						stats: {
							currentMonthIncome: 0,
							renewIncome: 0,
							newCardIncome: 0,
							newMembers: 0,
							incomeChange: 0,
							renewChange: 0,
							newCardChange: 0,
							memberChange: 0
						},
						monthlyData: [],
						courseData: [{
								id: 1,
								name: '瑜伽入门',
								tags: ['塑形', '基础'],
								teacher: '张老师',
								sections: 12,
								desc: '适合初学者的瑜伽基础课程，涵盖基本体式和呼吸法。'
							},
							{
								id: 2,
								name: '燃脂搏击',
								tags: ['减脂', '高强度'],
								teacher: '李教练',
								sections: 8,
								desc: '高强度间歇训练，结合搏击动作快速燃烧脂肪。'
							},
							{
								id: 3,
								name: '普拉提核心',
								tags: ['核心训练', '体态矫正'],
								teacher: '王老师',
								sections: 10,
								desc: '针对核心肌群的强化训练，改善身体姿态。'
							}
						],
						totalCards: 0,
						timeCardStats: {
							validWithBalance: 0,
							memberCount: 0
						},
						countCardStats: {
							validWithBalance: 0,
							memberCount: 0
						},
						depositCardStats: {
							validWithBalance: 0,
							memberCount: 0
						},
						cardList: []
					};
				},
				computed: {
					rules() {
						return {
							'name': [{
								'required': true,
								'message': '请填写名称',
								'trigger': 'blur'
							}],

							'price': [{
								'required': true,
								validator: (rules, value, callback) => {
									if (!value) {
										callback(new Error('请填写价格'))
									} else {
										const reg = /^\d+(\.\d{0,2})?$/;
										if (reg.test(value)) {
											if (value < 10000) {
												callback()
											} else {
												callback(new Error('价格小于10000'))
											}
										} else {
											callback(new Error('价格格式只能为数字,且最多保留两位小数'))
										}
									}
								},
								'trigger': 'blur'
							}],
						}
					},
					currentMonth() {
						return new Date().getMonth() + 1;
					}
				},
				created() {
					this.shopkeeperId = requestUrlParam('id');
					this.init()
				},
				mounted() {
					this.initChart();
					this.fetchData();
					this.fetchCardStats();
					this.fetchCardList();
				},
				methods: {
					goBack() {
						try {
							if (window.parent && typeof window.parent.menuHandle === 'function') {
								window.parent.menuHandle({
									id: '3',
									url: 'page/stadium/list.html',
									name: '店铺管家'
								}, false);
							} else {
								// 备用方案：直接跳转到list页面
								window.location.href = 'list.html';
							}
						} catch (error) {
							// 如果menuHandle调用失败，也使用备用方案
							window.location.href = 'list.html';
						}
					},
					viewCourseDetail(course) {
						try {
							window.parent.menuHandle({
								id: 'course-detail',
								url: `page/stadium/course-detail.html?id=${course.id}`,
								name: '课程详情'
							}, true)
						} catch (e) {
							window.location.href = `course-detail.html?id=${course.id}`
						}
					},

					async init() {
						// var _this = this
						// // console.log(_this.tags)
						// getAllTagsName().then(res=>{
						//     _this.tags = res.data
						//     tagsOptions = res.data
						// })
						queryStadiumById(this.shopkeeperId).then(res => {
							console.log(res);
							if (String(res.code) === '1') {
								this.ruleForm = {
									...res.data
								};
								this.ruleForm.status = res.data.status == '1'
								this.imageUrl = `/common/download?name=${res.data.image}`
								// var arr = res.data.tags   //搏击,瑜伽  ->  ['搏击', '瑜伽',]
								// var split = arr.split(",");
								// console.log(split)
								// this.ruleForm.tags = split
								// console.log(arr)
								// console.log(this.ruleForm.tags)

							} else {
								this.$message.error(res.msg || '操作失败')
							}
						})

					},


					selectTdetail(teacherId) {

						if (window.parent && typeof window.parent.menuHandle === 'function') {

							window.parent.menuHandle({
								id: 'teacher_detail',
								url: `page/stadium/tdetail.html?id=${teacherId}`,
								name: '教师详情'
							}, true);
						} else {

							window.location.href = `page/stadium/tdetail.html?id=${teacherId}`;
						}
					},
					selectStadium() {
						getByIdWithStadium(this.shopkeeperId).then(res => { //请求结果处理
							if (String(res.code) === '1') {
								this.tableData = res.data
							} else {
								this.$message.error(res.msg)
							}
						})
					},
					viewAnnualReport(st) {
						try {
							if (window.parent && typeof window.parent.menuHandle === 'function') {
								window.parent.menuHandle({
									id: '3',
									url: 'page/stadium/annual-report.html?id=' + st,
									name: '收入报表',
								}, true);
							} else {
								// 备用方案
								window.location.href = 'page/stadium/annual-report.html?id=' + st;
							}
						} catch (error) {
							console.error('跳转失败:', error);
						}
					},

					
					handleCheckAllChange(val) {
						this.ruleForm.tags = val ? tagsOptions : []
						this.isIndeterminate = false;
						console.log(this.ruleForm.tags)

					},
					handleCheckedCitiesChange(value) {
						let checkedCount = value.length;
						this.checkAll = checkedCount === this.tags.length;
						this.isIndeterminate = checkedCount > 0 && checkedCount < this.tags.length;
						this.ruleForm.tags = value
						console.log(this.ruleForm.tags)
					},

					handleAvatarSuccess(response, file, fileList) {
						// 拼接down接口预览
						if (response.code === 0 && response.msg === '未登录') {
							window.top.location.href = '../login/login.html'
						} else {
							this.imageUrl = `/common/download?name=${response.data}`;
							this.ruleForm.image = response.data
						}
					},

					onChange(file) {
						if (file) {
							const suffix = file.name.split('.')[1];
							const size = file.size / 1024 / 1024 < 2;
							if (['png', 'jpeg', 'jpg'].indexOf(suffix) < 0) {
								this.$message.error('上传图片只支持 png、jpeg、jpg 格式！');
								this.$refs.upload.clearFiles();
								return false
							}
							if (!size) {
								this.$message.error('上传文件大小不能超过 2MB!');
								return false
							}
							return file
						}
					},

					initChart() {
						this.chart = echarts.init(this.$refs.chart);
						window.addEventListener('resize', () => this.chart.resize());
					},
					fetchData() {
						setTimeout(() => {
							const currentYear = new Date().getFullYear();
							const isCurrentYear = this.selectedYear === currentYear;
							const monthsToShow = isCurrentYear ? this.currentMonth : 12;
							// 这里先用random模拟一下
							// 具体就是每个月以及其对应的收入
							// 代码运行后格式如下
							// [
							//   { month: "1月", income: 23456 },
							//   { month: "2月", income: 34567 },
							//   // ...
							//   { month: "12月", income: 28901 }
							// ]
							this.monthlyData = Array.from({
								length: monthsToShow
							}, (_, i) => {
								const monthIndex = i + 1;
								return {
									month: `${monthIndex}月`,
									income: Math.round(Math.random() * 50000 + 20000),
									isCurrent: isCurrentYear && monthIndex === this.currentMonth
								};
							});
							// 如果是当前年，添加未来月份的标签（但不显示数据）
							if (isCurrentYear && monthsToShow < 12) {
								for (let i = monthsToShow + 1; i <= 12; i++) {
									this.monthlyData.push({
										month: `${i}月`,
										income: null, // 未来月份没有数据
										isCurrent: false
									});
								}
							}
							this.updateStats();
							this.updateChart();
						}, 500);
					},

					updateStats() {
						const currentMonthData = this.monthlyData.find(
							item => item.month === `${this.currentMonth}月` && item.income !== null
						);

						if (currentMonthData) {
							this.stats = {
								currentMonthIncome: currentMonthData.income,
								renewIncome: Math.round(currentMonthData.income * 0.6),
								newCardIncome: Math.round(currentMonthData.income * 0.4),
								newMembers: Math.round(Math.random() * 50 + 20),
								incomeChange: (Math.random() * 20 - 5).toFixed(1),
								renewChange: (Math.random() * 15 - 3).toFixed(1),
								newCardChange: (Math.random() * 25 - 8).toFixed(1),
								memberChange: (Math.random() * 30 - 5).toFixed(1)
							};
						}
					},

					updateChart() {
						const option = {
							title: {
								text: `${this.selectedYear}年月度营业额`,
								left: 'center'
							},
							tooltip: {
								trigger: 'axis',
								formatter: '{b}<br/>营业额: ¥{c}'
							},
							xAxis: {
								type: 'category',
								data: this.monthlyData.map(item => item.month)
							},
							yAxis: {
								type: 'value',
								axisLabel: {
									formatter: '¥{value}'
								}
							},
							series: [{
								data: this.monthlyData.map(item => ({
									value: item.income,
									itemStyle: {
										color: item.isCurrent ? '#67C23A' : '#409EFF' // 当前月份绿色高亮
									}
								})),
								type: 'bar',
								label: {
									show: true,
									position: 'top',
									formatter: params => params.value ?
										`¥${this.formatNumber(params.value)}` : ''
								}
							}]
						};
						this.chart.setOption(option);
					},
					formatNumber(num) {
						return num.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
					},
					fetchCardStats() {
						setTimeout(() => {
							this.totalCards = 356;

							this.timeCardStats = {
								validWithBalance: 135,
								memberCount: 124
							};

							this.countCardStats = {
								validWithBalance: 187,
								memberCount: 156
							};

							this.depositCardStats = {
								validWithBalance: 34,
								memberCount: 28
							};
						}, 500);
					},
					fetchCardList() {
						setTimeout(() => {
							this.cardList = [{
									id: 1,
									name: '黄金年卡',
									image: '',
									validWithBalance: 78,
									memberCount: 65
								},

							];
						}, 800);
					},
					toCardDetail(st){
						try {
							st=1;
						  if (window.parent && typeof window.parent.menuHandle === 'function') {
						    window.parent.menuHandle({
						      id: '3',
						      url: 'page/card/detail.html?id='+st,
						      name: '会员卡详情',
						    }, true);
						  } else {
						    // 备用方案
						    window.location.href = '../../page/card/detail.html?id='+st;
						  }
						} catch (error) {
						  console.error('跳转失败:', error);
						}
					}
				}
			})
		</script>
	</body>
</html>